<template>
  <div id="footers" tabindex="10" @blur="show = false">
    <div class="control">
      <img @click="go_lastSong" class="pre" src="../assets/music_pre.png" />
      <img
        @click="playMusic"
        v-if="play"
        class="play"
        src="../assets/music_play.png"
      />
      <img
        @click="pausemusic"
        v-if="!play"
        class="play"
        src="../assets/music_stop.png"
      />
      <img @click="go_nextSong" class="next" src="../assets/music_next.png" />
    </div>
    <div class="jd">
      <div class="progress">
        <span>{{ current }}</span>
        <VueSlider
          class="playprogress"
          ref="slider"
          v-bind="setting"
          v-model="progress"
          style="display:inline-block;padding:0px 10px;"
        ></VueSlider>
        <span>{{ endTime }}</span>
        <div class="volume">
          <img src="../assets/volume.png" />
          <VueSlider
            class="playprogress"
            ref="slider"
            v-bind="setting2"
            style="display:inline-block;padding:0px 10px;"
            v-model="volume"
          ></VueSlider>
          <audio
            @canplay="audioInit"
            ref="player"
            @ended="ended"
            @error="errorLoad"
            :src="mp3Url"
            style="display:none"
          ></audio>
        </div>
      </div>
      <div class="playlist" @click.self="showList">
        <span @click.self="showList">{{ $store.state.playlist.length }}</span>
        <PlayList @show="showList" class="list" v-show="show" />
      </div>
    </div>
  </div>
</template>
<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import PlayList from "./play-list";
import { mapState } from "vuex";
import axios from "axios";
export default {
  components: {
    VueSlider,
    PlayList,
  },
  data() {
    return {
      play: true,
      setting: {
        width: 440,
        tooltip: "none",
        dotSize: 10,
        processStyle: {
          "background-color": "rgb(232,60,60)",
        },
        min: 0,
        max: 200,
        clickable: true,
      },
      setting2: {
        width: 100,
        tooltip: "none",
        dotSize: 8,
        clickable: true,
        contained: true,
        processStyle: {
          "background-color": "rgb(232,60,60)",
        },
        max: 100,
        min: 0,
        value: 50,
      },
      endTime: "00.00",
      mp3Url: "",
      show: false,
      current: "00.00", //当前播放时间
      progress: "",
      update: "",
      volume: "50", //音量
      load: "",
    };
  },
  methods: {
    showList() {
      this.show = !this.show;
    },
    audioInit() {
      const duration = this.$refs.player.duration;
      this.endTime = this.$options.filters["timeToStr"](duration);
      this.setting.max = parseInt(duration, 10);
      this.playMusic();
      this.load.hide();
    },
    //获取当前播放时间
    getCurrent() {
      if (this.$refs.player) {
        const currentTime = this.$refs.player.currentTime;

        this.current = this.$options.filters["timeToStr"](currentTime);
        this.progress = parseInt(currentTime, 10);
      }
    },
    initurl() {
      this.load = this.$loading.show();
      axios
        .get("http://neteasecloudmusicapi.zhaoboy.com/song/url", {
          params: { id: this.Nowplay },
        })
        .then((res) => {
          let { data } = res.data;
          data[0].url
            ? (this.mp3Url = data[0].url)
            : this.$box("该歌曲暂无资源!");
          this.load.hide();
        });
    },
    ended() {
      //播放完毕
      this.play = true;
      this.go_nextSong();
    },
    //播放出错
    errorLoad() {},
    //播放
    playMusic() {
      if (!this.Nowplay) return;
      this.update = setInterval(this.getCurrent, 1000 / 60);
      this.$refs.player.play();
      this.$store.commit("changeplay", true);
      this.play = false;
    },
    pausemusic() {
      if (!this.Nowplay) return;
      clearInterval(this.update);
      this.$refs.player.pause();
      this.$store.commit("changeplay", false);
      this.play = true;
    },
    go_lastSong() {
      this.changeMusic(0, -1);
    },
    go_nextSong() {
      this.changeMusic("max", 1);
    },
    changeMusic(len, num) {
      let newId = this.Nowplay; //当前歌曲id
      if (!newId) return;
      let playList = this.playlist; // 播放列表
      if (playList.length === 1) {
        this.$store.commit("play", newId);
      } else {
        if (newId == playList[len ? playList.length - 1 : 0].id) {
          null;
        } else {
          let index = playList.findIndex((item) => item.id == this.Nowplay);
          this.$store.commit("play", playList[index + num].id);
        }
      }
    },
  },
  mounted() {
    if (this.Nowplay.length != 0) {
      //如果有歌曲
      this.initurl();
      this.volume = "50";
      this.$store.commit("initAudio", this.$refs.player);
    }
  },
  computed: {
    ...mapState(["Nowplay", "playlist"]),
  },
  filters: {
    timeToStr(time) {
      let min = Number.parseInt(time / 60, 10) + "";
      let seconds = Number.parseInt(time % 60, 10) + "";
      min = min.length === 1 ? "0" + min : min;
      seconds = seconds.length === 1 ? "0" + seconds : seconds;
      return min + ":" + seconds;
    },
  },
  watch: {
    Nowplay() {
      this.initurl();
    },
    progress(newValue, oldValue) {
      if (Math.abs(newValue - oldValue) > 1) {
        this.current = this.$options.filters["timeToStr"](newValue);
        this.$refs.player.currentTime = newValue;
      }
    },
    volume: function(newValue) {
      this.$refs.player.volume = newValue / 100;
    },
    playlist(a) {
      if (!a.length) {
        this.$refs.player.pause();
        this.pausemusic();
      }
    },
  },
};
</script>
<style lang="less" scoped>
#footers {
  height: 50px;
  width: 100%;
  background-color: #f6f6f8;
  border: 1px solid #e1e1e2;
  padding: 5px 0;
  position: relative;
  display: flex;
  outline: none;
  .control {
    display: flex;
    align-items: center;
    width: 20%;
    justify-content: center;
    -webkit-app-region: none;
    img {
      width: 30px;
      height: 30px;
      cursor: pointer;
      border-radius: 30px;
    }
    .play {
      width: 35px;
      height: 35px;
      margin: 0 15px;
    }
  }
  .jd {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .progress {
      width: 80%;
      display: flex;
      align-items: center;
      span {
        font-size: 12px;
        margin: 0 5px;
      }
      .volume {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          opacity: 0.5;
          margin-left: 25px;
        }
      }
    }
    .playlist {
      width: 45px;
      height: 15px;
      margin-right: 15px;
      background-color: #e1e1e2;
      border-bottom-right-radius: 10px;
      border-top-right-radius: 10px;
      cursor: pointer;
      outline: none;
      text-align: right;
      font-size: 8px;
      background-image: url("../assets/playlist.jpg");
      background-position: 0px 0px;
      background-size: 15px 20px;
      background-repeat: no-repeat;
      span {
        padding: 15px;
        font-size: 10px;
      }
      .list {
        position: absolute;
        width: 580px;
        height: 470px;
        right: 0;
        top: -471px;
        z-index: 100;
        cursor: default;
      }
    }
  }
}
</style>
<style>
.volume .vue-slider:hover .vue-slider-dot {
  display: flex;
}
.volume .vue-slider-dot {
  display: none;
  width: 8px;
  height: 8px;
}
.volume .vue-slider-dot .vue-slider-dot-handle {
  width: 3px;
  height: 3px;
}
.vue-slider-dot {
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
}
.vue-slider-dot:hover {
  box-shadow: 0.5px 0.5px 5px 2px rgba(0, 0, 0, 0.32);
}
.vue-slider-dot-handle {
  width: 4px;
  height: 4px;
  background-color: #eb3c3c;
  border-radius: 50%;
  box-shadow: none;
}
</style>
